<template>
    <view :class="bagcolor==1? 'content-header' : 'active' ">
        <view class="title-name">
            请选择收货地址
        </view>
        <view class="selected-address">
            <radio-group @change="radioChange">
                <view class="selected-item" v-for="(item,index) in addressList" :key="index"
                    @click="selectedAddress(item)">

                    <radio class="checkbox" :checked="index==current" :value="item.id"></radio>
                    <text style="margin-right: 26rpx;">{{item.name}}</text><text>{{item.phone}}</text>
                    <view class="item-address">
                        {{item.province + item.city + item.district + item.addressDetail}}
                    </view>

                    <!-- <view class="operate">
						    <view style="position: absolute; right: 80rpx; top: 0; color:red;"
						        @click.stop="deletFun(item.id)">删除</view>
						    <view style="position: absolute; right: 0; top: 0; color:#1677FF;"
						        @click.stop="topage(item.id)">编辑</view>
						</view> -->

                    <view class="default_item">

                        <view class="operate">
                            <view style="position: absolute; right: 80rpx; top: 0; color:red;"
                                @click.stop="deletFun(item.id)">删除</view>
                            <view style="position: absolute; right: 0; top: 0; color:#1677FF;"
                                @click.stop="topage(item.id)">编辑</view>
                        </view>
                    </view>

                </view>

            </radio-group>
        </view>
        <view class="addAdress">
            <u-icon name="plus-circle" size="20"></u-icon>
            <text style="margin-left:16rpx;" @click="topage()">新增地址</text>
        </view>

        <view class="default_item" v-for="(item,index) in addressList" :key="index">
            <view class="default" @click.stop="handleTriggerSelect(item)"
                :class="item.isDefault == 0 ? 'selected' : ''">
                <uni-icons class="selected-icon" v-if="item.isDefault == 0" type="checkbox-filled" color="#ff4254"
                    size="20"></uni-icons>
                <!-- <uni-icons v-else type="circle" color="#ff4254" size="20"></uni-icons> -->
                <view class="defaultText" v-if="item.isDefault == 0">已设为默认</view>
                <view class="defaultText" v-else>默认地址授权管理</view>
            </view>
        </view>
        <!-- <view class="radio-button1">
          
          <button style="background-color: #1677ff;color: #ebf3ff;" @click="addressConfirm()" @click1="sendParent"> 
            确认
          </button>
          <button @click="addressClose()">取消</button>
        </view> -->
    </view>

</template>

<script>
    import address from "@/api/address.js";
    export default {
        data() {
            return {
                show: true,
                addressList: [],
                addressLis: [{
                        id: "1",
                        name: "张三",
                        phone: "15678094125",
                        address: " 湖北省武汉市洪山区关山大道花园小区"
                    },
                    {
                        id: "2",
                        name: "李四",
                        phone: "15678094125",
                        address: " 湖北省武汉市洪山区关山大道花园小区"
                    },
                    {
                        id: "3",
                        name: "王五",
                        phone: "15678094125",
                        address: " 湖北省武汉市洪山区关山大道花园小区"
                    }
                ],
                current: 1 //默认选中的值
            }
        },


        mounted() {
            this.getAddressList();
        },
        methods: {
            sendParent() {
                    this.$emit('my-event', '这是传递的参数');
                  },
            addressClose(e) {
                console.log(e)
              this.show = false;
            },
            addressConfirm(e) {
                console.log(e)
              this.show = false;
            },
            getAddressList() {

                address.addressList().then((res) => {
                    console.log("res=>", res);
                    if (res.code == 200) {
                        this.addressList = res.rows;
                        console.log("add..", this.addressList)
                        console.log(res.rows)
                    }
                }).catch((erro) => {
                    console.log("error")
                });
            },
            // 选择地址
            selectedAddress(item) {
                if (this.source != "order") return;
                uni.setStorageSync("selectedAddress", item);
                uni.navigateBack();
            },
            handleTriggerSelect(item) {
                if (item.isDefault == 0) {
                    uni.showToast({
                        title: "该地址已是默认地址",
                        icon: "none",
                    });
                    return;
                }
                let params = {
                    ...item,
                    isDefault: 0,
                };
                address.updateAddress(params).then((res) => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: "修改成功",
                            icon: "none",
                        });
                        this.getAddressList();
                    }
                });
            },
            deletFun(ids) {

                address.deleteAddressIds(ids).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        uni.showToast({
                            title: "删除成功",
                            icon: "none",
                        });
                        this.getAddressList();
                    }
                });
            },
            topage(id) {
                console.log(id, "id====");
                if (id) {

                    uni.navigateTo({
                        url: "/subPages/mine/addAdress?id=" + id,
                    });
                } else {
                    uni.navigateTo({
                        url: '/subPages/mine/addAdress',
                    });
                }
            },
            radioChange(event) {
                console.log(event.detail.value);
            },
        },
        onShow() {
            this.getAddressList();

        },
        props: ['bagcolor'],

        // mounted() {
        // console.log(this.bagcolor);
        // },
        onLoad() {
            this.getAddressList();
        },

        props: ['bagcolor'],

        mounted() {
            this.getAddressList();
        },

    }
</script>

<style lang="scss" scoped>
    .content-header {
        box-sizing: border-box;
        padding-left: 32rpx;
        padding-right: 32rpx;


    }

    .active {
        background-color: #F8F9FF;
        border-radius: 25rpx;
        box-sizing: border-box;
        padding: 30rpx;

    }

    .title-name {
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        margin: 32rpx 0;
        margin-left: 16rpx;
    }

    .selected-address {
        width: 100%;
    }

    .item-address {
        width: 398rpx;
        margin-left: 62rpx;
        color: #777777;

    }

    .selected-item {
        width: 100%;
        margin: 38rpx 0;
        font-size: 30rpx;
        position: relative;

    }

    .checkbox {
        margin-right: 14rpx;
        margin-top: 16rpx;

    }

    .addAdress {
        color: #777777;
        display: flex;
    }

    .default_item {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .default {
            display: flex;
            // align-items: center;

            color: #ff4254;
        }

        .operate {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .edit {
                color: #ff4254;
            }
        }
    }

    .selected-icon {
        margin: 2rpx;
        color: #fff !important;
    }
</style>